<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">
    <h3>基础按钮</h3>
    <button class="btn btn-default">基础按钮</button>
    <a href="" class="btn btn-default" role="button">A标签</a>
    <input type="button" class="btn btn-default" value="input 按钮">

    <h3>多标签</h3>
    <button class="btn btn-default">基础按钮</button>
    <a href="" class="btn btn-default">标签按钮</a>
    <input type="text" class="btn btn-default" value="input按钮">
    <span class="btn btn-default">span按钮</span>
    <div class="btn btn-default">div按钮</div>
    <input type="submit" class="btn btn-default" value="Submit按钮">
    <input type="reset" class="btn btn-default" value="reset按钮">

    <h3>按钮风格</h3>

    <pre>
          <h4>
        btn-default:默认风格
        btn-primary:首选项样式
        btn-success:成功样式
        btn-info:一般信息
        btn-waring:警告样式
        btn-danger:危险样式
        btn-link:连接样式
          </h4>
    </pre>
    <button class="btn">btn-default</button>
    <button class="btn-primary">btn-primary</button>
    <button class="btn-danger">btn-danger</button>
    <button class="btn-info">btn-info</button>
    <button class="btn-warning">btn-warning</button>
    <button class="btn-link">btn-link</button>
    <button class="btn-success">btn-success</button>

    <h3>按钮大小</h3>
    <pre>
        <h4>
            btn-lg:大型按钮
            btn-sm:小型按钮
            btn-xs:超小型按钮
        </h4>
    </pre>
    <button class="btn btn-primary">btn-primary</button>
    <button class="btn btn-primary btn-lg">btn-primary</button>
    <button class="btn btn-primary btn-sm">btn-primary</button>
    <button class="btn btn-primary btn-xs">btn-primary</button>

    <h3>块状按钮</h3>
    <button class="btn btn-primary btn-block">btn-primary</button>
    <button class="btn btn-primary btn-block">btn-primary</button>
    <button class="btn btn-primary btn-block">btn-primary</button>
    <button class="btn btn-primary btn-block">btn-primary</button>

    <h3>激活和禁用</h3>
    <pre>
        <h4>
            鼠标悬停状态(hover)
            鼠标点击状态(active)
            焦点状态(focus)
        </h4>
    </pre>
    <button class="btn btn-primary">btn-primary</button>
    <button class="btn btn-primary hover">btn-primary</button>
    <button class="btn btn-primary active">btn-primary</button>
    <button class="btn btn-primary focus">btn-primary</button>
</div>
</body>
</html>